<template>
  <div>
    <!-- 新增菜单按钮 模糊查询菜单 -->
    <div class="keyWord2">
      <div v-permission="'selectQxglCds'">
        <el-input style="width: 400px;" v-model="cdMc" placeholder="请输入菜单名称"></el-input>
        <el-button type="primary" cdTb="el-cdTb-search" @click="showMenusByName()">搜索</el-button>
      </div>
    </div>
    <div style="padding: 0 80rem 5px 0">
      <el-button v-permission="'insertQxglCd'" type="success" cdTb="el-cdTb-plus"
                 @click="addBigMenudialogVisible = true">新增一级菜单
      </el-button>
    </div>
    <!-- 表格树形展示菜单 -->
    <el-table :data="menus" border class="etable" row-key="cdBh"
              :tree-props="{ children: 'children' }">
      <el-table-column align="center" prop="cdBh" label="菜单编号" width="100">
      </el-table-column>
      <el-table-column align="center" prop="cdMc" label="菜单名称" width="110">
      </el-table-column>
      <el-table-column align="center" prop="cdDj" label="等级" width="60">
        <template slot-scope="scope">
          <el-tag size="mini" v-show="scope.row.cdDj == 1">一级</el-tag>
          <el-tag size="mini" type="success" v-show="scope.row.cdDj == 2">二级</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="cdFcdbh" label="父菜单">
      </el-table-column>
      <el-table-column align="center" prop="cdCjsj" label="创建时间" width="160">
      </el-table-column>
      <el-table-column align="center" prop="cdGxsj" label="修改时间" width="160">
      </el-table-column>
      <el-table-column align="center" prop="cdLymc" label="路由名称">
      </el-table-column>
      <el-table-column align="center" prop="cdLylj" label="路由路径">
      </el-table-column>
      <el-table-column align="center" prop="cdTb" label="图标">
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="250">
        <template slot-scope="scope">
          <el-button v-if="scope.row.cdDj == 1 && dzJks.indexOf('insertQxglCd') != -1" @click="toaddMenu(scope.row)"
                     type="success" size="small">新增菜单
          </el-button>
          <el-button v-permission="'updateQxglCd'" @click="toupMenu(scope.row)" size="small"
                     type="primary">修改
          </el-button>
          <el-button v-if="scope.row.cdDj > 1 && dzJks.indexOf('selectQxglDzByCdBh') != -1"
                     @click="toAction(scope.row)" size="small" type="info">查看权限
          </el-button>
          <el-popconfirm v-if="scope.row.cdDj > 1 && dzJks.indexOf('deleteQxglCd') != -1" style="margin-left: 10px;"
                         title="删除该菜单前，请先检查该菜单是否还有子菜单"
                         @confirm="delMenu(scope.row)">
            <el-button slot="reference" size="small" type="danger">删除</el-button>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-dialog v-permission="'insertQxglCd'" title="新增一级菜单" :visible.sync="addBigMenudialogVisible" width="30%">
        <el-form :model="BiggestMenu" :rules="rules" ref="BiggestMenu" label-position="right" label-width="80px">
          <el-form-item label="菜单名称" prop="cdMc">
            <el-input v-model="BiggestMenu.cdMc" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="菜单等级" prop="cdDj">
            <el-input v-model="BiggestMenu.cdDj" disabled></el-input>
          </el-form-item>
          <el-form-item label="路由名称" prop="cdLymc">
            <el-input v-model="BiggestMenu.cdLymc"></el-input>
          </el-form-item>
          <el-form-item label="路由路径" prop="cdLylj">
            <el-input v-model="BiggestMenu.cdLylj"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="cdTb">
            <el-input v-model="BiggestMenu.cdTb"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetaddBigMenu">取 消</el-button>
            <el-button type="primary" @click="addBigMenu()">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog v-permission="'insertQxglCd'" title="新增菜单" :visible.sync="addMenudialogVisible" width="30%">
        <el-form :model="newMenu" :rules="rules" ref="newMenu" label-position="right" label-width="100px">
          <el-form-item label="父菜单名称" prop="cdMc">
            <el-input disabled v-model="selectedMenu.cdMc" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="菜单名称" prop="cdMc">
            <el-input v-model="newMenu.cdMc" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="路由名称" prop="cdLymc">
            <el-input v-model="newMenu.cdLymc"></el-input>
          </el-form-item>
          <el-form-item label="路由路径" prop="cdLylj">
            <el-input v-model="newMenu.cdLylj"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="cdTb">
            <el-input v-model="newMenu.cdTb"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetnewMenuForm">取 消</el-button>
            <el-button type="primary" @click="addMenu()">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog v-permission="'updateQxglCd'" title="修改菜单" :visible.sync="upMenudialogVisible">
        <el-form :model="upMenu" :rules="rules" ref="upMenu" label-position="right" label-width="80px">
          <el-form-item label="菜单名称" prop="cdMc">
            <el-input v-model="upMenu.cdMc" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="路由名称" prop="cdLymc">
            <el-input v-model="upMenu.cdLymc"></el-input>
          </el-form-item>
          <el-form-item label="路由路径" prop="cdLylj">
            <el-input v-model="upMenu.cdLylj"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="cdTb">
            <el-input v-model="upMenu.cdTb"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                    <el-button @click="resetupMenuForm">取 消</el-button>
                    <el-button type="primary" @click="upMenuFun()">确 定</el-button>
                </span>

      </el-dialog>
      <!-- 权限动作 -->
      <el-dialog v-permission="'selectActionByMenuId'" :title="selcdMc" :visible.sync="actiondialogVisible"
                 width="60%">
        <el-table :data="actions" border>
          <el-table-column align="center" prop="dzBh" label="动作编号">
          </el-table-column>
          <el-table-column align="center" prop="dzMc" label="动作名称">
          </el-table-column>
          <el-table-column align="center" prop="dzLx" label="动作类型">
            <template slot-scope="scope">
              <el-tag size="mini" v-show="scope.row.dzLx == 1">授权动作</el-tag>
              <el-tag size="mini" type="success" v-show="scope.row.dzLx == 0">普通动作</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="dzSscdmc" label="所属菜单名称">
          </el-table-column>
          <el-table-column align="center" prop="dzXq" label="动作详情">
          </el-table-column>
          <el-table-column align="center" prop="dzJk" label="接口" width="170">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button v-permission="'updateQxglDz'" @click="toupAct(scope.row)" type="primary"
                         size="mini">修改
              </el-button>
              <el-popconfirm v-permission="'deleteQxglDz'" style="margin-left: 10px;"
                             title="请先检查该动作无相关角色拥有！！"
                             @confirm="delAction(scope.row.dzBh)">
                <el-button slot="reference" size="small" type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
                    <el-button type="success" @click="toaddAct()" v-permission="'insertQxglDz'">新增动作</el-button>
                    <el-button type="primary" @click="actiondialogVisible = false">确 定</el-button>
                </span>
      </el-dialog>
      <el-dialog v-permission="'updateQxglDz'" title="修改动作" :visible.sync="upActDialogVisible" width="30%">
        <el-form :model="upActform" :rules="rules2" ref="upActform" label-position="right" label-width="110px">
          <el-form-item label="动作名称" prop="dzMc">
            <el-input v-model="upActform.dzMc"></el-input>
          </el-form-item>
          <el-form-item label="动作类型" prop="dzLx">
            <el-radio-group v-model="upActform.dzLx">
              <el-radio :label="'0'">普通动作</el-radio>
              <el-radio :label="'1'">授权动作</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="动作详情" prop="dzXq">
            <el-input v-model="upActform.dzXq"></el-input>
          </el-form-item>
          <el-form-item label="动作对应接口" prop="dzJk">
            <el-input v-model="upActform.dzJk"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateAct()">确 定</el-button>
            <el-button @click="resetupActform" type="danger">取 消</el-button>
          </el-form-item>
        </el-form>

      </el-dialog>
      <el-dialog v-permission="'insertQxglDz'" title="新增动作" :visible.sync="addActDialogVisible" width="30%">
        <el-form :model="newActform" :rules="rules2" ref="newActform" label-position="right" label-width="110px">
          <el-form-item label="动作名称" prop="dzMc">
            <el-input v-model="newActform.dzMc"></el-input>
          </el-form-item>
          <el-form-item label="动作类型" prop="dzLx">
            <el-radio-group v-model="newActform.dzLx">
              <el-radio :label="'0'">普通动作</el-radio>
              <el-radio :label="'1'">授权动作</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="动作详情" prop="dzXq">
            <el-input v-model="newActform.dzXq"></el-input>
          </el-form-item>
          <el-form-item label="动作对应接口" prop="dzJk">
            <el-input v-model="newActform.dzJk"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addAct()">确 定</el-button>
            <el-button @click="resetnewActform" type="danger">取 消</el-button>
          </el-form-item>
        </el-form>

      </el-dialog>
    </div>

  </div>
</template>

<script>
import axios from "../axios/axios.js"
import {selectMenus, insertQxglCd, updateQxglCd, selectMenuBymenuName} from "@/api/menu"
import {insertAction, updateAction} from "@/api/action"

export default {
  data() {
    return {
      menus: [],
      cdMc: "",
      addMenudialogVisible: false,
      upMenudialogVisible: false,
      addBigMenudialogVisible: false,
      BiggestMenu: {
        cdMc: "",
        cdDj: 1,
        cdFcdbh: 0,
        cdLymc: "",
        cdLylj: "",
        cdTb: ""
      },
      newMenu: {
        cdMc: "",
        cdDj: 2,
        cdFcdbh: "",
        cdLymc: "",
        cdLylj: "",
        cdTb: ""
      },
      selectedMenu: {},
      upMenu: {
        cdMc: "",
        cdDj: 0,
        cdFcdbh: "",
        cdLymc: "",
        cdLylj: "",
        cdTb: ""
      },
      rules: {
        cdMc: [
          {required: true, message: '请输入菜单名称', trigger: 'blur'}
        ],
        cdLymc: [
          {required: true, message: '请填写对应路由名称', trigger: 'blur'},
        ],
        cdLylj: [
          {required: true, message: '请输入对应路由路径', trigger: 'blur'}
        ],
      },
      actiondialogVisible: false,
      selcdBh: 0,
      selcdMc: "",
      actions: [],
      upActDialogVisible: false,
      addActDialogVisible: false,
      upActform: {
        dzBh: "",
        dzMc: "",
        cdBh: 0,
        dzLx: "",
        dzXq: "",
        dzJk: "",
        dzSscd: "",
        dzSscdmc: ""
      },
      newActform: {
        dzBh: "",
        dzMc: "",
        dzLx: "",
        dzXq: "",
        dzJk: "",
        dzSscd: "",
        dzSscdmc: ""
      },
      rules2: {
        dzMc: [
          {required: true, message: '请输入动作名称', trigger: 'blur'}
        ],
        dzLx: [
          {required: true, message: '请填写动作类型', trigger: 'blur'},
        ],
        dzXq: [
          {required: true, message: '请输入动作描述', trigger: 'blur'}
        ],
        dzJk: [
          {required: true, message: '请输入对应接口', trigger: 'blur'}
        ],
      },
      dzJks: []
    }
  },
  created() {
    this.showMenus()
    this.dzJks = localStorage.getItem("dzJks").split(",")
  },
  methods: {
    showMenus() {
      //调用selectMenus函数，获取菜单数据
      selectMenus().then(res => {
        if (res.code == "200") {
          //将获取到的菜单数据赋值给this.menus
          this.menus = res.data
        }

      })
    },
    showMenusByName() {
      //判断菜单名称是否为空
      if (this.cdMc == "") {
        //若为空，调用showMenus函数，显示菜单数据
        this.showMenus()
      } else {
        //若不为空，调用selectMenuBymenuName函数，根据菜单名称获取菜单数据
        selectMenuBymenuName({
          keyWord: {
            cdmc: this.cdMc
          }
        }).then(res => {
          if (res.code == "200") {
            //将获取到的菜单数据赋值给this.menus
            this.menus = res.data
          }
        })
      }

    },
    toaddMenu(menu) {
      this.selectedMenu = menu
      // 将新菜单的父菜单id设置为添加的菜单id
      this.newMenu.cdFcdbh = menu.cdBh;
      // 显示添加菜单的对话框
      this.addMenudialogVisible = true;
    },
    addMenu() {
      // 验证表单
      this.$refs['newMenu'].validate((valid) => {
        if (valid) {
          // 插入新菜单
          insertQxglCd(this.newMenu).then(res => {
            // 判断是否添加成功
            if (res.code == "200") {
              this.$message({
                message: res.msg,
                type: "success"
              })
              // 关闭添加菜单的对话框
              this.addMenudialogVisible = false;
              // 显示菜单列表
              this.showMenus()
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetnewMenuForm() {
      // 重置表单
      this.$refs.newMenu.resetFields();
      // 关闭添加菜单的对话框
      this.addMenudialogVisible = false
    },
    addBigMenu() {
      // 验证表单
      this.$refs['BiggestMenu'].validate((valid) => {
        if (valid) {
          // 插入大菜单
          insertQxglCd(this.BiggestMenu).then(res => {
            // 判断是否添加成功
            if (res.code == "200") {
              this.$message({
                message: res.msg,
                cdDj: "success"
              })
              // 关闭添加大菜单的对话框
              this.addBigMenudialogVisible = false;
              // 显示菜单列表
              this.showMenus()
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    },
    resetaddBigMenu() {
      this.$refs.BiggestMenu.resetFields();
      this.addBigMenudialogVisible = false
    },
    toupMenu(menu) {
      this.upMenu = {...menu};
      this.upMenudialogVisible = true;
    },
    upMenuFun() {
      this.$refs['upMenu'].validate((valid) => {
        if (valid) {
          updateQxglCd(this.upMenu).then(res => {
            if (res.code == "200") {
              this.$message({
                message: res.msg,
                type: "success"
              })
              this.upMenu = {}
              this.upMenudialogVisible = false;
              this.showMenus()
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    resetupMenuForm() {
      this.$refs.upMenu.resetFields();
      this.upMenudialogVisible = false
    },
    delMenu(menu) {
      if (menu.children != null && menu.children.length != 0) {
        this.$message.error("请先删除该菜单下的子菜单，或移动至其他菜单下！！")
        return;
      } else {
        axios({
          method: "POST",
          url: "/qxglCd/deleteQxglCd/" + menu.cdBh
        }).then(res => {
          if (res.code == "200") {
            this.$message({
              message: res.msg,
              cdDj: "success"
            })
            this.showMenus()
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    toAction(menu) {
      this.selcdBh = menu.cdBh
      this.selcdMc = menu.cdMc
      this.actiondialogVisible = true;
      this.showAction(menu.cdBh)
    },
    showAction(cdBh) {
      axios({
        method: "POST",
        url: "/qxglDz/selectQxglDzByCdBh/" + cdBh
      }).then(res => {
        if (res.code == "200") {
          this.actions = res.data
        }
      })
    },
    toupAct(action) {
      console.log("action", action)
      this.upActDialogVisible = true;
      this.upActform = {...action};
    },
    updateAct() {
      this.$refs['upActform'].validate((valid) => {
        if (valid) {
          this.upActform.dzSscd = this.selcdBh
          this.upActform.dzSscdmc = this.selcdMc
          updateAction(this.upActform).then(res => {
            if (res.code == "200") {
              this.$message({
                message: res.msg,
                cdDj: "success"
              })
              this.upActform = {}
              this.upActDialogVisible = false;
              this.showAction(this.selcdBh)
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    resetupActform() {
      this.$refs.upActform.resetFields();
      this.upActDialogVisible = false
    },
    toaddAct() {
      this.addActDialogVisible = true;
      this.newActform.dzSscd = this.selcdBh
      this.newActform.dzSscdmc = this.selcdMc
    },
    addAct() {
      this.$refs['newActform'].validate((valid) => {
        if (valid) {
          insertAction(this.newActform).then(res => {
            if (res.code == "200") {
              this.$message({
                message: res.msg,
                type: "success"
              })
              this.newActform = {}
              this.addActDialogVisible = false;
              this.showAction(this.selcdBh)
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    resetnewActform() {
      this.$refs.newActform.resetFields();
      this.addActDialogVisible = false
    },
    delAction(dzBh) {
      axios({
        method: "POST",
        url: "/qxglDz/deleteQxglDz/" + dzBh
      }).then(res => {
        if (res.code == "200") {
          this.$message({
            message: res.msg,
            cdDj: "success"
          })
          this.showAction(this.selcdBh)
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style>
.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  background: #FFF;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  width: 46%;
}
</style>
